<template>
  <div class="page_container">
    <NavBar :title="$t('profileMenu.blacklist')" />

    <virtual-list
      v-if="contactStore.storeBlackList.length > 0"
      class="my_scrollbar mt-3 flex-1 overflow-y-auto"
      :data-key="'userID'"
      :data-sources="contactStore.storeBlackList"
      :data-component="GenericListItem"
      :estimate-size="88"
      :extra-props="{
        total: contactStore.storeBlackList.length,
        showRemove: true,
        onRemove: blackRemove,
      }"
    />
    <CommonEmpty v-else />
  </div>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar/index.vue'
import VirtualList from '@components/VirtualList'
import GenericListItem from '@/components/GenericListItem/index.vue'
import type { BlackUserItem } from '@openim/wasm-client-sdk/lib/types/entity'
import useContactStore from '@/store/modules/contact'
import CommonEmpty from '@/components/CommonEmpty/index.vue'
import { IMSDK } from '@/utils/imCommon'
import { feedbackToast } from '@/utils/common'

const contactStore = useContactStore()

const blackRemove = ({ userID }: BlackUserItem) => {
  IMSDK.removeBlack(userID).catch((error) => feedbackToast({ error }))
}
</script>

<style lang="scss" scoped></style>
